<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>APS User Registration</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
	txt = obj.options[obj.selectedIndex].value;
	document.getElementById(id1).style.display = 'none';
	document.getElementById(id2).style.display = 'none';
	if ( txt.match(id1) ) {
			document.getElementById(id1).style.display = 'block';
	}
	if ( txt.match(id2) ) {
		document.getElementById(id2).style.display = 'block';
	}
}
// ]]>
</script>
</head>
<h1>User Registration</h1>
<body style="margin:80px 150px 0px;padding:0px 0px 0px 0px;">
      <form id="Form" method="post" action="UserRegistration">
             <div id="header" style="width:320px;text-align:center;"> </div>
             <div style="height:20;text-align:center;"></div>
<table width="340" cellspacing="0" cellpadding="2">  
<tbody>
     <tr>
        <td>Surname:</td>
        <td><input id="text" name="surname" value="" /></td>
     </tr>
     <tr>
          <td>First Name:</td>
          <td><input id="text" name="firstname" value=" "/></td>
     </tr>
             <tr>
                 <td>Email Address:</td>
                 <td><input id="text" name="email" value=" "/></td>
             </tr>
             <tr>
                 <td>ID/Passport Number:</td>
                 <td><input id="text" name="passport" value=" "/></td>
             </tr>
             <tr>
                 <td>Telephone No.:</td>
                 <td><input id="text" name="telephone" value=" "/></td>
             </tr>
             <tr>
                 <td>Date of birth:</td>
                 <td><input id="text" name="dob" value=" "/></td>
             </tr>
                        
             <tr>
                 <td>User Name:</td>
                 <td><input id="text" name="username" value=" "/></td>
             </tr>
             <tr>
                 <td>Password:</td>
                 <td><input type="password" name="password" value=""/></td>
             </tr>
             <tr>
                 <td>Confirm password:</td>
                 <td><input type="password" name="confirmPassword" value=""/></td>
             </tr>
</tbody>

<tbody>
        <tr>
           <td class="title">Billing Sites:</td>
           <td class="field">
              <select name="type" onchange="display(this,'telcom','credit');">
                <option>Please select:</option>
                <option value="credit">Credit Services</option>
                <option value="telcom">Telecommunication Services</option>
                <option value="municipal">Municipality Services</option>
              </select>
           </td>
        </tr>
</tbody>
    <tfoot>
    <tr>
        <td class="align-center" colspan="2"><input type="submit" value="Save" /></td>
    </tr>
    </tfoot>

<tbody id="credit" style="display: none;">
    <tr>
       <td class="title">Credit type:</td>
       <td class="field"><input type="text" name="credittype" value="" /></td>
    </tr>
    <tr>
       <td class="title">Account Number:</td>
       <td class="field"><input type="text" name="accountNum" value="" /></td>
    </tr>
</tbody>
<tbody id="telcom" style="display: none;">
    <tr>
      <td class="title">Phone Number:</td>
      <td class="field"><input type="text" name="telephone" value="" /></td>
    </tr>

</tbody>

</table>
</form>
</body>
</html> 